<template>
  <div>
    <card-container style="margin-top: 16px;padding-bottom: 32px" title="个人信息" :label="isEdit?'返回':'修改'" @listenCardConLabel="changeEditor1">
      <div class="info-account-item__wrap">
        <yun-avatar size="90px" :src="$store.state.userProfile.avatar" :name="$store.state.userProfile.nickName"> </yun-avatar>
        <div class="change-button"><span>更换头像</span>
          <input type="file" @change="(e)=>openCropper(e)" />
        </div>
        <input type="text" :disabled="!nickCanModify" v-if="isEdit" v-model="nickName" :placeholder="nickName" class="input1" />
        <span v-if="isEdit" class="spanAfterInput1">
          <span v-if="nickCanModify">*每月最多修改三次</span>
          <span v-if="!nickCanModify">*您本月已经达到最大修改次数</span>
        </span>
        <p class="input1" v-if="!isEdit">{{nickName}} </p>
      </div>

      <div class="info-account-item__wrap">
        <div class="radio-box1">
          <div class="input-radio">
            <input id="man" type="radio" :disabled="!isEdit"  name="sex" v-model="gender"  :value="1" />
            <label for="man">男</label>
          </div>

          <div class="input-radio">
            <input id="woman" type="radio" :disabled="!isEdit" name="sex" v-model="gender"  :value="2">
            <label for="woman">女</label>
          </div>

          <div class="input-radio">
            <input id="unknow" type="radio" :disabled="!isEdit" name="sex" v-model="gender"  :value="0">
            <label for="unknow">保密</label>
          </div>
        </div>

        <div class="select-box__wrap">
          <p class="input1" v-if="!isEdit">{{birthday}}</p>
          <date-picker :dateValue="birthday" v-if="isEdit" v-on:listenDateChange="getData2Date"></date-picker>
        </div>

      </div>

      <div class="info-account-item__wrap">
        <input type="text" v-if="isEdit" class="input2" v-model="signature" :placeholder="signature"  placeholder="请输入个人签名">
        <p class="input2" v-if="!isEdit">{{signature}}</p>


      </div>
      <p class="submit-button" v-if="isEdit" @click="dataPostSaveUserInfo(1)">保存</p>

    </card-container>
    <card-container style="margin-top: 16px;padding-bottom: 32px" title="联系方式" :label="isEdit2?'返回':'修改'" @listenCardConLabel="changeEditor2">
      <div class="info-account-item__wrap">
        <input v-if="isEdit2" type="text" class="input1" v-model="wxNumber" placeholder="微信号">
        <p v-if="!isEdit2" class="input1">{{wxNumber?wxNumber+'(微信号)':'微信号'}}</p>

      </div>

      <div class="info-account-item__wrap">
        <input v-if="isEdit2" type="text" class="input1" v-model="qqNumber" placeholder="QQ号">
        <p v-if="!isEdit2" class="input1">{{qqNumber?qqNumber+'(QQ号)':'QQ号'}}</p>

      </div>

      <div class="info-account-item__wrap">
        <input v-if="isEdit2" type="text" class="input1" v-model="mobile" placeholder="手机号">
        <p v-if="!isEdit2" class="input1">{{mobile?mobile+'(手机号)':'手机号'}}</p>

      </div>
      <p class="submit-button" v-if="isEdit2" @click="dataPostSaveUserInfo(2)">保存</p>
    </card-container>
    <yun-cropper :type="0" :file="addFile" v-on:listenCropperPic="getCroppedPic"></yun-cropper>

  </div>
</template>


<script>

  import CardContainer from '../../../components/pc/cardContainer';
  import DatePicker from '../../../components/pc/datePicker/datePicker';
  import config from '../../../action/config';

  export default {
    name:'info',
    components:{
      CardContainer,DatePicker
    },
    data(){
      return{
        gender:0,
        mobile:null,
        nickName:null,
        qqNumber:null,
        signature:null,
        wxNumber:null,
        birthday:'',
        addFile:null,
        isEdit:false,
        isEdit2:false,
      }
    },
    mounted(){
      this.getDataUserInfo();
    },

    watch:{
      isEdit(val){
        if(val===false){
          this.getDataUserInfo();

        }
      },
      isEdit2(val){
        if(val===false){
          this.getDataUserInfo();

        }
      }
    },

    methods:{

      //进入编辑状态1
      changeEditor1(){
        this.isEdit = !this.isEdit
      },

      //进入编辑状态2
      changeEditor2(){
        this.isEdit2 = !this.isEdit2
      },

      getData2Date(data){
        //this.birthday = data.date;
        this.birthday = data.value;
      },
      getCroppedPic(pic){
        if(pic){
          this.userAvatar = pic;
          this.dataPostSaveUserAvatar();
        }

      },
      openCropper(e){
        this.addFile = e.target.files[0];
      },
      getDataUserInfo(){
        this.$axios.$get(config.api.get.User.myInfo).then((response) => {
          if(response.code===0){
            let data = response.data;
            this.nickName=data.nickName;
            this.gender= data.gender;
            this.birthday = data.birthday;
            this.signature = data.signature;
            this.userAvatar = data.userAvatar;
            this.mobile = data.mobile;
            this.qqNumber = data.qqNumber;
            this.wxNumber = data.wxNumber;
            this.nickCanModify = data.nickCanModify;
          }
        })
      },
      dataPostSaveUserInfo(type){
           let userInfo1 = {
            gender:this.gender,
            nickName:this.nickName,
            signature:this.signature,
            birthday:this.birthday,
            userAvatar:this.userAvatar};
           let userInfo2 = {};

           if(this.nickName.toString().length>20){
             this.$message({
               type:'warning',
               message:'昵称长度不能超过20个字符！'
             })
             return false
           }
          if (this.mobile) userInfo2.mobile =this.mobile;
          if (this.qqNumber) userInfo2.qqNumber =this.qqNumber;
          if (this.wxNumber) userInfo2.wxNumber =this.wxNumber;
        this.$axios.$put(config.api.put.User.reviseInfo,type===1?userInfo1:userInfo2).then((response)=>{
          if(response.code===0){
            let user = {
              ... this.$store.state.userProfile,
              userAvatar:this.userAvatar,
              nickName: this.nickName
            }
            this.$store.commit('userProfile/setUser', user);
            this.getDataUserInfo();
            this.isEdit = false;
            this.isEdit2 = false;
            this.$message({
              message:response.msg,
              type:'success'
            })
          }else{
            this.$message({
              message:response.msg,
              type:'warning'
            })
          }
        })
      },
      dataPostSaveUserAvatar(){
        let userInfo1 = {
          userAvatar:this.userAvatar};

        this.$axios.$put(config.api.put.User.reviseInfo,userInfo1).then((response)=>{
          if(response.code===0){
            let user = {
              ... this.$store.state.userProfile,
              userAvatar:this.userAvatar,
            }
            this.$store.commit('userProfile/setUser', user);
            this.getDataUserInfo();
            this.$message({
              message:response.msg,
              type:'success'
            })
          }else{
            this.$message({
              message:response.msg,
              type:'warning'
            })
          }
        })
      }


    },
  }

</script>


<style lang="scss" scoped>

  .info-account-item__wrap{
    width:726*$length;
    margin:32*$length auto;
    @extend %flex-row-spb;
    justify-content: flex-start;
    .change-button{
      position:relative;
      margin-left: 16*$length;
      margin-right: 156*$length;
      @include fontStyle(14,19,500,#999,left);
      @extend %cursorPointer;
      @extend %animate-transition;
      & span{
        @extend %cursorPointer;
      }
      & input{
        @extend %cursorPointer;
        cursor:pointer;
        position:absolute;
        top:0;
        right:0;
        height:100%;
        width:100%;
        opacity: 0;
        font-size: 0;
        z-index: 100;
      }

      &:hover{
        color:#75D098;
      }

    }

    .input1{
      box-sizing: border-box;
      width:302*$length;
      border-radius: 4*$length;
      padding:14*$length 16*$length;
      @include fontStyle(14,48,500,#999,left);
      line-height: 20px;
      background-color: #F4F8FA;
      span{
        margin-left: 10*$length;
        @include fontStyle(12,48,500,#ff000073,left);
        line-height: 1;

      }
    }
    .spanAfterInput1{
      position: relative;
      span{
        position: absolute;
        width:300*$length;
        top:20*$length;
        @include fontStyle(12,48,500,#ff000073,left);
        right:-2*$length;
      }
    }

    .input2{
      box-sizing: border-box;
      width:726*$length;
      height:48*$length;
      border-radius: 4*$length;
      padding:14*$length 16*$length;
      @include fontStyle(14,48,500,#999,left);
      line-height: 20px;

      background-color: #F4F8FA;
    }

    .select-box__wrap{
      margin-left:130*$length;
      width:407*$length;
      @extend %flex-row-spb;

      .select-box{
        width:125*$length;
        height:48*$length;
        border-radius:4*$length;
        background-color: #F4F8FA;

        box-sizing: border-box;
        padding:14*$length 16*$length;
        @extend %flex-row-spb;
        p{
          @include fontStyle(14,19,500,#333,start);
        }
        h6{
          @extend %flex-row-center;
          transform:rotate(0);
          @extend %animate-transition;
          &:hover{
            transform:rotate(180deg);

          }

        }
      }
    }



    .radio-box1{
      width:188*$length;
      @extend %flex-row-spb;
      .input-radio {
        margin-right:30*$length;
        white-space: nowrap;

        input[type="radio"] {
          // 将原生单选框透明
          opacity: 0;
          // 紧接在单选框后面的标签，用于显示文字并作为伪元素的载体
          + label {
            position: relative;
            cursor: pointer;
            @include fontStyle(14,19,500,#666,left);

            // 下面使用伪元素模拟单选框

            // 圆形外边线
            &::before {

              content: '';
              position: absolute;
              left: -18px;
              top:3px;
              border-radius: 50%;
              background-color: #F4F5F5;
              width: 12*$length;
              height: 12*$length;
              border:2px solid #F0F0F0;
              transition: .1s;
            }
          }
          &:checked {
            + label {
              &::before {
                width: 6*$length;
                height: 6*$length;
                border: 4px solid #75D098;
              }
            }
          }
          &:hover {
            + label::before {
              border-color:  #75D09833;
            }
          }
          &:focus {
            + label::before {
              box-shadow: 0 0 6px  #75D09833;
            }
          }

        }

      }
    }

    .radio-box2{
      margin-left:16*$length;
      width:424*$length;
      @extend %flex-row-spb;
      .input-radio {
        margin-right:30*$length;
        white-space: nowrap;

        input[type="radio"] {
          // 将原生单选框透明
          opacity: 0;
          // 紧接在单选框后面的标签，用于显示文字并作为伪元素的载体
          + label {
            position: relative;
            cursor: pointer;
            @include fontStyle(14,19,500,#666,left);

            // 下面使用伪元素模拟单选框

            // 圆形外边线
            &::before {

              content: '';
              position: absolute;
              left: -18px;
              top:3px;
              border-radius: 50%;
              background-color: #F4F5F5;
              width: 12*$length;
              height: 12*$length;
              border:2px solid #F0F0F0;
              transition: .1s;
            }
          }
          &:checked {
            + label {
              &::before {
                width: 6*$length;
                height: 6*$length;
                border: 4px solid #75D098;
              }
            }
          }
          &:hover {
            + label::before {
              border-color:  #75D09833;
            }
          }
          &:focus {
            + label::before {
              box-shadow: 0 0 6px  #75D09833;
            }
          }

        }

      }
    }


  }
  .submit-button{
    width:148*$length;
    height:48*$length;
    border-radius: 4*$length;
    background-color: #75D098;
    @include fontStyle(14,48,500,#fff,center);
    margin:32*$length auto 0;
    @extend %cursorPointer;
    @extend %animate-transition;
    &:hover{
      filter:brightness(110%);
    }
  }


</style>
